<template>
	<right-box>
		<div class="content-inner">
			<div class="rail-transit">
				<!-- <SubTitle title="城市/城际轨道交通" img="global/城市城际轨道交通.png" /> -->
				<SubTitle title="城市/地铁线路交通" img="global/城市城际轨道交通.png">
					<!-- <template #right>
						<div class="rightSlot">
							<input type="text" v-model="busName" :placeholder="'请输入线路'" />
							<div class="btn" @click="search">查询</div>
							<div class="btn" @click="reset">重置</div>
						</div>
					</template> -->
				</SubTitle>
				<SecondTitle title="地铁信息">
					<template #right>
						<div class="rightSlot">
							<input type="text" v-model="name" :placeholder="'请输入线路'" />
							<div class="btn" @click="search">查询</div>
							<div class="btn" @click="reset">重置</div>
						</div>
					</template>
				</SecondTitle>
				<RailTransit ref="RailTransitRef" v-model:bus-name="busName" />
			</div>
			<div class="office-info">
				<SubTitle title="办公信息栏" img="global/办公信息栏.png" />
				<OfficeInfo />
			</div>
		</div>
	</right-box>
</template>

<script lang="ts" setup>
	import RailTransit from './right/RailTransit.vue'
	import OfficeInfo from './right/OfficeInfo.vue'
	import { ref } from 'vue'
	const busName = ref(undefined)
	const RailTransitRef = ref()
  const name = ref();
	const search = () => {
		RailTransitRef.value.search(busName.value)
	}
	const reset = () => {
		RailTransitRef.value.reset()
	}
</script>

<style lang="scss" scoped>
	.rail-transit,
	.office-info {
		width: 100%;
		background-image: url(@img/global/panel-bg.png);
		background-size: 100% 100%;
		padding-bottom: 50px;
	}
	.rail-transit {
		margin-bottom: 25px;
	}
	.rightSlot {
		font-size: 30px;
		display: flex;
		padding-right: 120px;

		input {
			outline: none;
			background-color: rgba(11, 70, 132);
			border: none;
			color: #fff;
			padding-left: 10px;
			height: 50px;
			align-self: center;
		}
		.btn {
			background-color: rgb(11, 70, 132);
			color: #fff;
			font-size: 30px;
			display: flex;
			justify-content: center;
			align-items: center;
			width: 100px;
			height: 55px;
			cursor: pointer;
			border-radius: 4px;
			margin: 0 5px;
			align-self: center;
			&:hover {
				background-color: #0057c0;
			}
		}
	}
</style>
